Css Code for Floating Social Networks Blogger Widget

Home » Tutorials » Css Code for Floating Social Networks Blogger Widget

Css Code for Floating Social Networks Blogger Widget

I really put my hat off for those(my favorite) bloggers & widgets developers whom spent hours or even days, creating new ideas on their original widgets.

After months of research done through internet since last year ,I've analyzed both users or bloggers encountered loading problems occurred in floating social widgets on java scripts in different web browsers.

I've decided to create a simple widget few weeks ago based on pure css code which able to be viewed in most browsers.
(Here's another additional widget's idea/creation for users online).

Floating Social Networks In Css Code

View Demo from

<style>
ul.vertical-sns{width: 80px; overflow: auto;background:;list-style-type: none;display:scroll;position:fixed;bottom:5px;left:5px;}
ul.vertical-sns li{img src-align: left;}
ul.vertical-sns li a{display: inline-block;text-indent: 5px;overflow:hidden;background:#777;
text-decoration: none;padding: 5px;margin-bottom: 0px; color: #888;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;}
ul.vertical-sns li a:hover{padding-left: 10px; background:#eee;border:0px solid #777;border-right-width:10px; }
</style>
<div>
<ul class="vertical-sns">
<li><a href="Your FacebookUrl"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfp_xUCsyYYi27cHuJJF1OlJC32hTMpWeCxKtuQHf0BAvQV2wjOGwUwBGtFBF82NIKvU1tzun8xDe0plPir_Ft9QRPyFfH-baAhfaQLFxD-TjrrubawycN7Cn6bCKe0fbM6dazHaKqbqg/s800/fb_round.png"  title='Facebook'/></a></li>
<li><a href="Your Googleplus Url"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKZo2Xao-NacmW4pBq7syGjLEIP4B9N6fCdZ1P5AQtcHnVWCQDNEoSzx1hQnnlptJcHh_Y9NSIHPj0tZKVZM-sIE7L6DINz3bNfrKLc9DIVXCxc3aBhnOI1MawQPJ24f8nsuYUrospgMU/s800/gplus_round.png" title='GooglePlus' /></a></li>
<li><a href="Your TwitterUrl"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMkqpQKlLWhNVqDPi6xLyd8MfmlmQ0WKD1PSliYKCmmN6_2ceHePOniuanlFZERx-DQTaUwIb6b95CX7BZYakfLLVJWDzAZXfNTVs383SCUtIeeCBQq4DGHBf6Jh_UmkLpZQaV-1fNOsc/s800/twitter_round.png" title='Twitter' /></a></li>
<li><a href="Your PinInterest Url"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvQT_Uc0DqIcLzDIRHYMuy0WrvSzOuG-e4Ifa-GnFMrX8SpCqXUUa3iAjE67H3BzU0boR-WCX1S1hgHBFKLU-OzJRCg2VGGCRm4gJu4bsR-hJ0w2I7KG5z4ItyKWlWPGOm2k4qOcT4ymc/s800/pinterest_round.png"  title=' Pinterest'/></a></li>
<li><a href="http://feedburner.google.com/fb/a/mailverify?uri=Your Rss Url"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwe_nmrRLgnA3QOMRsomGAJ1lvlemfawQMemWAQAYsw4OUfMi80rw8T3NDYWGfbQR7TEgqhoWonxzyS82MxXLW8A0eoKYDVr938EGVg4WFTxcKYXs1WVwmaZ-st1DWA74xMkBLE1HqYYw/s800/rss_round.png" title='Receive Newsletter' /></a></li>
</ul>
</div>

Notes to Remember:

Replace <a href="Url links'> to your own social networks & your rss feed urls
For non Pinterest users,for your own reference please do delete this column: <li><a href="Your PinInterest Url"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvQT_Uc0DqIcLzDIRHYMuy0WrvSzOuG-e4Ifa-GnFMrX8SpCqXUUa3iAjE67H3BzU0boR-WCX1S1hgHBFKLU-OzJRCg2VGGCRm4gJu4bsR-hJ0w2I7KG5z4ItyKWlWPGOm2k4qOcT4ymc/s800/pinterest_round.png" title=' Pinterest'/></a></li>
Go to your blogger layout ,select Add A Gadget & HTML/Javascript, to view "Tutorials Here!"
Select Code, Ctrl copy & paste into html widget
Preview your template first (to make sure widget properly/correctly installed)
And lastly,click to html widget Save button.

Please do leave your comments here for if you encountered any problems regarding this widget.
Thank you ✿◕‿◕✿ readers & do join my social network too.....